<template>
    <div v-if="showImage" class="model-bg" @click="hide">
        <div class="fadeInLeft animated modal" @click="stopPropagation">
            <div class="topbar">
                <label class="topbar_title">请选择表情</label>
                <label class="topbar_title" for="input">从相册选择</label>
                <input type="file" hidden>
            </div>
            <div class="content">
                <div v-for="(item,index) in  this.biaoqingbao" :key="index">
                    <img class="content_img" :src="item" alt="" @click="chooseImg(item,index)">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import biaoqingbao from "@/custom-component/biaoqingbao.js"
import eventBus from "@/utils/eventBus.js"
import toast from "@/utils/toast.js"
import checkImgExists from "@/utils/checkImgExists.js"
// 导入generateID
import generateID from "@/utils/generateID"
// 导入自定义样式的包
import {commonStyle,commonAttr} from "@/custom-component/component-list"
export default {
    props:{
        showImage:{
            type: Boolean, 
            default:false,
        }
    },
    data(){
        return{
            biaoqingbao
        }
    },
    mounted(){
        eventBus.$on("changebiaoqingbao",()=>{
            this.showImage = !this.showImage
        })
    },
    methods:{
        hide(){
            this.showImage = !this.showImage
        },
        stopPropagation(e){
            e.stopPropagation()
        },
        async chooseImg(item,index){
            if(!item){
                toast("链接地址错误，请仔细检查","error")
            }
            console.log(item,index);
            let res = await checkImgExists(item)
            if(!res){
                toast("图片加载失败，请输入正确的图片链接地址","error")
                return
            }
            this.$store.commit("addComponent",{
                component:{
                    ...commonAttr,
                    id:generateID(),
                    // 组件种类
                    component:"Picture",
                    label:"图片",
                    icon:"",
                    // 图片路径
                    propValue:item,
                    // 图片样式
                    style:{
                        ...commonStyle,
                        top:0,
                        left:0,
                        width:192,
                        height:192,
                    }
                }
            })
            this.hide()
        }
    }
}
</script>
<style scoped>
.model-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 1001;
}
.modal{
    width: 400px;
    background: #fff;
    height: 100%;
}
.topbar{
    display: flex;
    justify-content: space-between;
}
.topbar_title{
    width: 100%;
    height: 40px;
    border: 1px solid #000;
    text-align: center;
    line-height: 40px;
    font-weight: 800;
}
.content{
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-left: 3px;
}
.content_img{
    float: left;
    border: 2px solid #eee;
    width: 90px;
    height: 90px;
}
</style>